<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
                    }
     div{
        box-sizing: border-box;                
         }              
    .con{
     
      min-height: 100vh;
      width:100%;
    }
    .con .header{
        width:100%;
        height:70px;
        line-height: 70px;
        background-color: #ccc;
        text-align: center;
        position: relative;
    }
      .con .header .gon{
          position: fixed;
          top:10px;
          right: 10px;
      }
    .con .header h1{
        color: aqua;
    }
    .con .content{
        display: flex;
        margin-top: 20px;
      
        flex-wrap: wrap;
    }
    .con .content .content_list{
        
        width:25%;
        height:400px;
        display: flex;
        flex-direction: column;
        background-color: #ddd;
        border: 2px solid #ccc;
    }
    .con .content .content_list .list_header{
     flex:3;
     display: flex;
     justify-content: center;
     align-items: center;
        padding: 10px;
    }
    .con .content .content_list .list_header img{
        width:80%;
        height: 280px;
    }
    .con .content .content_list .list_pic{
        border:2px solid #ccc;
        padding: 10px;
        flex:1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;

    }
    </style>
</head>
<body>
    <div class="con">
        <div class="header">
           <h1>这是风景区</h1>
            <div class="gon">
                <button><a href="blog">我的博客</a></button>
                 <button><a href="{% static '1.jpg' %}">我的个人中心</a></button>
            </div>
        </div>
        <img src="{% static '2.jpg' %}" alt="" style="width:50px;height:50px">
        <div class="content">
{% for foo in gallery.all %}
            <div class="content_list">
                <div class="list_header">
                    <img src="{{ foo.image.url }}" alt="">
                </div>
                <div class="list_pic">
                    <span>{{ foo.description }}</span>
                </div>
            </div>
    {% endfor %}

        </div>
    </div>
</body>
</html>